import { saveVoteRange } from '@/services/api/api-assess-month-emphasize-vote';
import { CheckCircleOutlined, CheckCircleTwoTone } from '@ant-design/icons';
import { ModalForm, ProFormDatePicker, ProFormRadio } from '@ant-design/pro-components';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import { Button, message } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
interface AddVoteRangeProps {
  onRefurbish: () => void;
  onSave: () => void;
}
const AddVoteRange: React.FC<AddVoteRangeProps> = ({ onRefurbish, onSave }) => {
  const access = useAccess();

  const formRef = useRef<ProFormInstance>();

  /**
   * 提交窗口
   */
  const [modalFormOpen, setModalFormOpenState] = useState<boolean>(false);

  const [selectType, setSelectTypeState] = useState<string>('');
  const [rangeDate, setRangeDateState] = useState<string>();

  const verificationSubmit = (values: any) => {
    if (!(values.type !== undefined && values.type.length > 0)) {
      message.warning('请选择类型');
      return false;
    }

    if (!(values.rangeDate !== undefined)) {
      message.warning('请选择范围');
      return false;
    }

    return true;
  };

  return (
    <DrawerForm
      key="add_assess_exhibition_vote_range"
      title={'新增投票'}
      drawerProps={{
        width: 500,
        maskClosable: false,
        destroyOnClose: true,
      }}
      layout="horizontal"
      formRef={formRef}
      trigger={<Button type="primary">新增投票</Button>}
      onOpenChange={(visible) => {
        if (visible) {
          setSelectTypeState('');
        }
      }}
      submitter={{
        submitButtonProps: {
          style: {
            display: 'none',
          },
        },
        render: (props, defaultDoms) => {
          return [
            ...defaultDoms,
            <Button
              key="button_release_state_discard"
              icon={<CheckCircleOutlined />}
              type="primary"
              style={{
                background: '#87d068',
              }}
              onClick={() => {
                const values = formRef.current?.getFieldsValue();

                if (!verificationSubmit(values)) {
                  return;
                }
                setModalFormOpenState(true);
              }}
            >
              提交
            </Button>,
            <ModalForm
              key={'modal_form_release_state_discard'}
              title={
                <>
                  <CheckCircleTwoTone
                    style={{
                      marginRight: 8,
                    }}
                    twoToneColor="#87d068"
                  />
                  确认提交
                </>
              }
              autoFocusFirstInput
              modalProps={{
                width: 400,
                destroyOnClose: true,
                onCancel: () => console.log('run'),
              }}
              open={modalFormOpen}
              onOpenChange={setModalFormOpenState}
              submitTimeout={2000}
              submitter={{
                submitButtonProps: {
                  type: 'primary',
                  style: { background: '#87d068' },
                },
              }}
              onFinish={async (values) => {
                props.submit();
                return true;
              }}
            />,
          ];
        },
      }}
      onFinish={async (values) => {
        if (!verificationSubmit(values)) {
          return false;
        }

        let response = await saveVoteRange({
          type: selectType,
          rangeDate: rangeDate,
        });

        if (response.code === 0) {
          message.success('提交成功');
          onSave();
          return true;
        } else {
          return false;
        }
      }}
    >
      <ProFormRadio.Group
        name="type"
        label="投票类型与范围"
        radioType="button"
        options={[
          {
            label: '年',
            value: '1',
          },
          {
            label: '季',
            value: '2',
          },
          {
            label: '月',
            value: '3',
          },
          {
            label: '周',
            value: '4',
          },
        ]}
        fieldProps={{
          onChange(e) {
            console.log('===', e.target.value);

            setSelectTypeState(e.target.value);
          },
        }}
      />
      <ProFormDatePicker.Year
        name="rangeDate"
        label={
          <>
            <span
              style={{
                color: '#ff4d4f',
                paddingRight: 4,
              }}
            >
              *
            </span>
            年
          </>
        }
        hidden={selectType != '1'}
        fieldProps={{
          onChange(date, dateString) {
            setRangeDateState(dateString as string);
          },
        }}
      />
      <ProFormDatePicker.Quarter
        name="rangeDate"
        label={
          <>
            <span
              style={{
                color: '#ff4d4f',
                paddingRight: 4,
              }}
            >
              *
            </span>
            季
          </>
        }
        hidden={selectType != '2'}
        fieldProps={{
          onChange(date, dateString) {
            setRangeDateState(dateString as string);
          },
        }}
      />
      <ProFormDatePicker.Month
        name="rangeDate"
        label={
          <>
            <span
              style={{
                color: '#ff4d4f',
                paddingRight: 4,
              }}
            >
              *
            </span>
            月
          </>
        }
        hidden={selectType != '3'}
        fieldProps={{
          onChange(date, dateString) {
            setRangeDateState(dateString as string);
          },
        }}
      />
      <ProFormDatePicker.Month
        name="rangeDate"
        label={
          <>
            <span
              style={{
                color: '#ff4d4f',
                paddingRight: 4,
              }}
            >
              *
            </span>
            周
          </>
        }
        hidden={selectType != '4'}
        fieldProps={{
          onChange(date, dateString) {
            setRangeDateState(dateString as string);
          },
        }}
      />
    </DrawerForm>
  );
};

export default AddVoteRange;
